﻿@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
     google.load('visualization', '1.1', { packages: ['controls'] });
    </script>
<script type="text/javascript">
    function getNewDataArray() {
        
        
        
        var list = [];
        var i=0;
        @foreach (var primaryClass in ViewBag.ListPrimaryClass){
        <text>var count=0;</text>
            foreach (var secondaryClass in ViewBag.ListSecondaryClass)
            {
                if (primaryClass.getId() == secondaryClass.getForeignKeyId(primaryClass))
                {
                    <text>count++;</text>

                }
                
            }
            
           <text>
                  var array = getNewDataRow('primaryClass.Name',count)
                  alert(array);
                  list.push(array);
                  i++;
             </text>
              
        }
        return list;
    }
    function getNewDataRow(name,count){
        
        var list = {
                    '0':name,
                    '1':count,
                    length:2
                    }
        var listsliced = Array.prototype.slice.call(list);
        
        return listsliced
    }
    function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string','Meetings');
        data.addColumn('number','Records');
         var list = getNewDataArray();
          
         data.addRows(list);

         //Creates a Dashboard
          var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
          var dashboard1 = new google.visualization.Dashboard(document.getElementById('dashboard1_div'));
         
         // Create a genre slider, passing some options
        var albumSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Records'
            
          }
        });         
        
        // Creates a barchart with some options
        var barChart = new google.visualization.ChartWrapper({
          'chartType': 'BarChart',
          'containerId': 'barchart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'right'
          }
        });
         
          // Creates a linechart with some options
        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'linechart_div',
          'options': {
            'width': 300,
            'height': 300,
            'legend': 'right'
          }
        });
        
        //Connects a dashboard with the charts
        dashboard.bind(albumSlider, barChart);
        dashboard1.bind(albumSlider, lineChart);
        
        //Draw the dashboard
        dashboard.draw(data);
        dashboard1.draw(data);
        
    
    }

    google.setOnLoadCallback(drawVisualization);
</script>

<h2>@ViewBag.Message</h2>
<ul>
    @foreach (var meeting in ViewBag.ListPrimaryClass)
    {
        <li>Meeting: @meeting.Name, Location: @meeting.Location</li>
        foreach (var record in meeting.Records) 
        { 
            <li>Recordholder: @record.RecordHolder, Result: @record.Result on the @record.Event.Name</li>
        }
    }
</ul>
<p>
    Here will come the test graphs.
</p>
     
<div id="dashboard_div">
    <div id="filter_div"></div>
    <div id="barchart_div" style="width: 600px; height: 400px;">
    </div>
    
</div>
<div id="dashboard1_div">
    <div id="filter_div"></div>
    <div id="linechart_div" style="width: 600px; height: 400px;">
    </div>
    
</div>